<template>
	<view class="tabBar" >
		<view v-for="(item, index) in tabBar" :key="item.url" class="tabbar_item" :class="item.url == currentPage?'active':'' " @click="navTo(item, index)">
			<image  v-if="item.url == currentPage" :src="item.imgClick" mode="":style="{width:item.width+'rpx',height:item.height+'rpx'}"></image>
			<image  v-else :src="item.imgNormal" mode="":style="{width:item.width+'rpx',height:item.height+'rpx'}"></image>
			<view class="text">{{ item.text }}</view>
			
		</view>
	</view>
	
</template>

<script>
export default {
	props:
		['currentPage']
	,
	data() {
		return {
			tabBar: [
				{
					url: '/pages/index/index',
					text: '首页',
					imgNormal: '/static/img/tabber1.png',
					imgClick: '/static/img/tabber1_on.png',
					width:44,
					height:44
				},
				{
					url: '/pages/index/shop',
					text: '积分商城',
					imgNormal: '/static/img/tabber2.png',
					imgClick: '/static/img/tabber2_on.png',
					width:44,
					height:44
				},
				{
					url: '/pages/index/my',
					text: '我的',
					imgNormal: '/static/img/tabber3.png',
					imgClick: '/static/img/tabber3_on.png',
					width:44,
					height:44
				}
			],
			currentPage:''
		};
	},
	mounted() {

	},
	created() {
		uni.hideTabBar();
	},
	methods: {
		navTo(item, index) {
			
			let _this = this;
			console.log(item.url);

			if (item.url !== _this.currentPage) {
				var isUrl = `${item.url}`;
				uni.switchTab({
					url: isUrl
				});
				
				
			} else {
				/* this.$parent.toTop() */
			}
		}
	}
};
</script>

<style>
.tabBar {
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 998;
	background-color: white;
	color: #999;
	border-left: 1px solid #eeeeee;
	border-top: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
	display: flex;
	justify-content: space-around;
	/* border-top-right-radius: 20upx; */
	/* border-top-left-radius: 20upx; */
	box-sizing: border-box;
	overflow: hidden;
	max-width: 750px;
		box-shadow: 0rpx -3rpx 7rpx 0rpx 
			rgba(0, 0, 0, 0.07);
			padding: 12rpx 0;
			
}
.tabBar .tabbar_item {
	width: 25%;
	font-size: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}
.tabBar .active {
	/* border-left: $isBorder;
                border-top: $isBorder; */
	background: white;
	color: #e7246a !important;
}

.tabBar image {
	width: 42upx;
	height:42upx;
	margin-left: 5upx;
	margin-bottom: 8rpx;
}
</style>
